<script lang="ts" setup>
import { $fetch } from '@/settings/utils/fetch';
import { ref } from 'vue';

const detail = ref<Record<string, any>>({});

const getDetail = async () => {
  const { isSuccess, data } = await $fetch('/admin/record/data');

  if (isSuccess) {
    detail.value = data;
  }
}

getDetail();
</script>

<template>
  <AGrid :cols="24" :row-gap="16" class="panel">
    <AGridItem class="panel-col" :span="8">
      <ASpace>
        <AAvatar :size="54" class="col-avatar">
          <img alt="avatar" src="@/settings/assets/images/1.svg">
        </AAvatar>
        <AStatistic :title="$t('settings.view.welcome.data.members')" :value="detail.userCounts ?? 0" :value-from="0" animation show-group-separator>
          <template #suffix>
            {{ $t('settings.view.welcome.data.count') }}
          </template>
        </AStatistic>
      </ASpace>
    </AGridItem>
    <AGridItem class="panel-col <2xl:b-r-0!" :span="8">
      <ASpace>
        <AAvatar :size="54" class="col-avatar">
          <img alt="avatar" src="@/settings/assets/images/2.svg">
        </AAvatar>
        <AStatistic :title="$t('settings.view.welcome.data.repository')" :value="detail.warehouseCounts ?? 0" :value-from="0" animation show-group-separator>
          <template #suffix>
            {{ $t('settings.view.welcome.data.count') }}
          </template>
        </AStatistic>
      </ASpace>
    </AGridItem>
    <AGridItem class="panel-col b-r-0!" :span="8">
      <ASpace>
        <AAvatar :size="54" class="col-avatar">
          <img alt="avatar" src="@/settings/assets/images/4.svg">
        </AAvatar>
        <AStatistic :title="$t('settings.view.welcome.data.organization')" :value="detail.orgCounts ?? 0" :value-from="0" animation show-group-separator>
          <template #suffix>
            {{ $t('settings.view.welcome.data.count') }}
          </template>
        </AStatistic>
      </ASpace>
    </AGridItem>
    <AGridItem :span="24">
      <ADivider class="panel-border" />
    </AGridItem>
  </AGrid>
</template>

<style lang="scss" scoped>
.arco-grid.panel {
  margin-bottom: 0;
  padding: 16px 20px 0 20px;
}

.panel-col {
  padding-left: 43px;
  border-right: 1px solid rgb(var(--gray-2));
}

.col-avatar {
  margin-right: 12px;
  background-color: var(--color-fill-2);
}

.up-icon {
  color: rgb(var(--red-6));
}

.unit {
  margin-left: 8px;
  color: rgb(var(--gray-8));
  font-size: 12px;
}

:deep(.panel-border) {
  margin: 4px 0 0 0;
}
</style>
